<!-- *Author: 黄旗, *Date: 2020-08-04 15:45:59 -->
<template>
    <Modal :width='800' v-model='modal' :title="edit?'编辑VPS服务器':'添加VPS服务器'" :mask-closable='false' @on-cancel='canceledit(modalname)'>
        <Form :label-width='130' :ref='modalname' :model='modalparams' :rules='createRules'>
            <h3 v-if="edit" class="ivu-mb-8 red" style="margin-left:72px">注意：如果当前VPS已经部署过网站，请慎重修改VPS的IP和数据库信息！</h3>
            <Row type="flex" justify="space-between" :gutter="24">
                <Col span="12">
                    <FormItem label='公网IP：' prop='public_ip'>
                        <Input clearable v-model='modalparams.public_ip' placeholder='请填写服务器的外网ip地址' />
                    </FormItem>
                    <FormItem label='内网IP：' prop='intranet_ip'>
                        <Input clearable v-model='modalparams.intranet_ip' placeholder='请填写服务器的内网ip地址' />
                    </FormItem>
                    <FormItem label='服务器端口号：' prop='ssh_port'>
                        <Input clearable v-model='modalparams.ssh_port' placeholder='请填写服务器的端口号，例：22' />
                    </FormItem>
                    <FormItem label='服务器别名：'>
                        <Input clearable v-model='modalparams.alias_name' placeholder='请填写服务器的别名' />
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label='数据库账户：' prop='db_user'>
                        <Input clearable v-model='modalparams.db_user' placeholder='请填写数据库账户' />
                    </FormItem>
                    <FormItem label='数据库密码：' prop='db_pass'>
                        <Input clearable v-model='modalparams.db_pass' placeholder='请填写数据库密码' />
                    </FormItem>
                    <FormItem label='数据库端口号：' prop='db_port'>
                        <Input clearable v-model='modalparams.db_port' placeholder='请填写数据库端口号，例：3306' />
                    </FormItem>
                    <FormItem label='服务状态：'>
                        <RadioGroup v-model="modalparams.status">
                            <Radio v-for="item of raidolist" :key="item.value" :label="item.value">{{item.label}}</Radio>
                        </RadioGroup>
                    </FormItem>
                </Col>
            </Row>
            <FormItem label='备注：'>
                <Input type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" clearable v-model='modalparams.remark' placeholder='请输入备注：' />
            </FormItem>
        </Form>
        <div slot='footer'>
            <Button @click='canceledit(modalname)'>取消</Button>
            <Button type='primary' @click='submitedit(modalname)'>保存</Button>
        </div>
    </Modal>
</template>

<script>
    import { vpsvpsvpsadd } from '@api/VPSsetting';
    export default {
        name: '',
        components: {},

        data () {
            return {
                modalname: 'modalname',
                modal: false,
                edit: false,
                raidolist: [{ value: 1, label: '启用' }, { value: 0, label: '禁用' }],
                modalparams: { id: 0, public_ip: '', intranet_ip: '', alias_name: '', ssh_port: '22', status: 1, remark: '', db_user: 'root', db_pass: '', db_port: '3306' },
                createRules: {
                    public_ip: [{ required: true, message: '请填写服务器的外网ip地址', trigger: 'blur' }],
                    intranet_ip: [{ required: true, message: '请填写服务器的内网ip地址', trigger: 'blur' }],
                    ssh_port: [{ required: true, message: '请填写服务器的端口号', trigger: 'blur' }],
                    db_user: [{ required: true, message: '请填写数据库账户', trigger: 'blur' }],
                    db_pass: [{ required: true, message: '请填写数据库密码', trigger: 'blur' }],
                    db_port: [{ required: true, message: '请填写数据库端口号', trigger: 'blur' }]
                }
            };
        },
        /* 函数方法集合 */
        methods: {
            /* @函数功能: 初始化 */
            initial (row) {
                this.$refs[this.modalname].resetFields();
                this.modalparams = { id: 0, public_ip: '', intranet_ip: '', alias_name: '', ssh_port: '22', status: 1, remark: '', db_user: 'root', db_pass: '', db_port: '3306' },
                this.askData(row)
            },
            askData (row) {
                this.modal = true
                this.edit = true
                if (row) {
                    this.modalparams = {
                        id: row.id,
                        public_ip: row.public_ip,
                        intranet_ip: row.intranet_ip,
                        alias_name: row.alias_name,
                        ssh_port: row.ssh_port,
                        status: +row.status,
                        remark: row.remark,
                        db_user: row.db_user,
                        db_pass: row.db_pass,
                        db_port: row.db_port
                    }
                } else {
                    this.edit = false
                }
            }, // 请求数据处理
            canceledit (name) {
                this.$refs[name].resetFields();
                this.modal = false
            },
            submitedit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        vpsvpsvpsadd(this.modalparams).then(() => {
                            if (this.modalparams.id == 0) this.$Message.success('新增成功')
                            else this.$Message.success('编辑成功')
                            this.$emit('askData')
                            this.modal = false
                        })
                    }
                })
            }
        }
    }
</script>
